<template lang="html">
    <section class="author">

    <div class="figure">
        <div class="item" v-for='a in author'>
            <div class="msg">
              <img class="headMap" :src="setAutherSrc(a.src)">
              <p class="name">{{a.name}}</p>
              <p class="explain">{{a.slogan}}</p>
            </div>

            <span class="focus" v-if='a.status' @click='a.status = !a.status'>关注</span>
            <span class="focus focused" @click='a.status = !a.status' v-else>已关注</span>

        </div>
    </div>
    <div class="more">
        <div class="other" v-for="o in other">
            <div class="authorMsg">
                <img class="headMap" :src="setOtherSrc(o.src)">
                <div class="intro">
                  <p class="name">{{o.name}}</p>
                  <p class="explain">{{o.slogan}}</p>
                </div>
            </div>
            <span class="focus" v-if='o.status' @click="o.status = !o.status">关注</span>
            <span class="focus focused" @click='o.status = !o.status' v-else>已关注</span>
        </div>
    </div>
    </section>
</template>

<script>
import store from '../stores/index'
import { mapState } from 'vuex'
export default {
  name: 'author',
  store,
  computed: {
    ...mapState({
      author: state => state.AuthorStore.author,
      other: state => state.AuthorStore.other
    })
  },
  methods: {
    setAutherSrc (src) {
      return src
    },
    setOtherSrc (src) {
      return src
    }

  }


}
</script>

<style lang="stylus">
    .figure{
        width: 100%;
        background: #272729;
        overflow: hidden;

        .item{
            width: 45%;
            height: 210px;
            margin: 2%;
            color: #fff;
            opaclay: .9;
            display: inline-block;
            text-align: center;
            background: #2e2e2f;
        }

        .msg{
          display: flex;
          flex-direction: column;
          background: #262627;
          padding: 6px 0;
          justify-content: center;
          align-items: center;

            img{
                width: 100px;
                height: 100px;
                border-radius: 50px;
                background: #fff;
            }

            .name{
                margin: 8px 0;
            }

            .explain{
              color: #666;
              width: 80%;
              font-size: 13px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
        }

        .focus{
          width: 80px;
          display: inline-block;
          font-size: 13px;
          padding: 4px 0;
          background: #e94c3d;
          border-radius: 10px;
          cursor: pointer;
          margin: 10px 0;
          -webkit-tap-highlight-color: rgba(0,0,0,0);
          border-radius: 25px;
        }
    }
    .more{
        padding: 10px;

        .other{
          height: 100px;
          display: flex;
          background: #eee;
          margin-bottom: 10px;
          -webkit-box-align: center;
          justify-content: space-between;
          padding: 0 10px;
          align-items: center;

          .authorMsg{
            display:flex;
            -webkit-box-pack: justify;
            justify-content: space-between;
            align-items: center;

            img{
              width: 80px;
              height:80px;
              border-radius: 50%;
              background: #fff;
            }
            .intro{
              height: 40px;
              margin: 0 10px;
              display: flex;
              flex-direction: column;
              justify-content: space-between;

              .explain{
                font-size: 13px;
                color: #666;
              }
            }
          }

        }
        .focus{
          width: 80px;
          display: inline-block;
          color: #fff;
          font-size: 13px;
          text-align: center;
          padding: 5px 0;
          background: #d5483a;
          border-radius: 15px;
          margin-left: 10px;
          -webkit-tap-highlight-color: rgba(0,0,0,0);
        }
    }
</style>
